<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百变方块</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            border: none;
            color: #000;

            --game-row: 10;
            --next-block-row: 5;

            --game-width: 306px;
            --game-height: 306px;
            --block-width: 30px;
            --block-height: 30px;
            --next-block-width: 15px;
            --next-block-height: 15px;

            --bg-color: #fff;
            --border-color: #000;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .flex-center {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        /* 小方格的样式 */
        .cell {
            width: var(--block-width);
            height: var(--block-height);
            background-color: #ccc;
            border: 1px solid #000;
        }

        .next-cell {
            width: var(--next-block-width);
            height: var(--next-block-height);
            background-color: #ce1a1a;
            border: 1px solid #000;
        }

        .element-hidden {
            visibility: hidden;
        }
        .element-show {
            visibility: visible;
        }
        .move-next-block {
            background-color: transparent;
        }
        .move-next-block .cell{
            width: var(--block-width);
            height: var(--block-height);
        }

        .layout {
            width: var(--game-width);
            height: 100%;
            background-color: var(--bg-color);
            color: #fff;
        }

        .layout .layout-top {
            width: 100%;
            height: 60px;
            flex-direction: row;
            justify-content: space-between;
        }

        .layout .layout-container {
            width: var(--game-width);
            height: var(--game-height);
            border: 3px solid var(--border-color);
            margin: 10px 0;
        }

        .game-container {
            width: 100%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(var(--game-row), 0fr);
            /* 4列 无间隙 */
        }

        .layout .layout-bottom {
            width: 100%;
            height: 100px;
        }

        .gama-next-block-container {
            width: 100%;
            height: 100%;
            flex-direction: row;
            justify-content: space-between;
        }

        .next-block {
            /* width: calc(var(--next-block-width) * 5); */
            /* height: calc(var(--next-block-height) * 5); */
            padding: 8px;
            background-color: #e68989;
            display: grid;
            /* grid-template-columns: repeat(var(--next-block-row), 0fr); 4列 无间隙 */
        }
    </style>
</head>

<body class="flex-center">
    <div class="layout flex-center">
        <div class="layout-top flex-center">
            <div class="reset"><button class="reset-btn">RESET</button></div>
            <div class="score-container flex-center">
                <div class="score-title">SCORE</div>
                <div class="score">999999</div>
            </div>
            <div class="max-score-container flex-center">
                <div class="max-score-title">MAX SCORE</div>
                <div class="max-score">999999</div>
            </div>
        </div>
        <div class="layout-container flex-center">
            <div class="game-container" ></div>
        </div>
        <div class="layout-bottom">
            <div class="gama-next-block-container flex-center">
                <div class="next-block next-block-1"></div>
                <div class="next-block next-block-2"></div>
                <div class="next-block next-block-3"></div>
            </div>
        </div>
    </div>
</body>
<script>
    const layout = document.querySelector('.layout');
    // 放置区域
    const gameContainer = document.querySelector('.game-container');
    // “下一个方块” 放置区域
    const nextBlockContainer = document.getElementsByClassName('next-block');
    // 重置按钮
    const resetBtn = document.querySelector('.reset-btn');
    // 当前分数显示区域
    const scoreContainer = document.querySelector('.score');
    // 最高分显示区域
    const maxScoreContainer = document.querySelector('.max-score');
    // 游戏区域方格数
    let gameRow = 10
    let gameCol = 10
    // 下一个方块显示的个数
    let nextBlockCount = 3
    // 用于存储游戏数据
    let data = []
    let nextBlockData = {}
    // 用于存储分数
    let score = 0
    // 用于存储最高分
    let maxScore = 0
    // 方块类型数
    const shapeCount = 7
    // 方块类型
    const shape = [[
        [1, 1, 1, 1],
    ], [
        [1],
        [1],
        [1],
        [1]
    ], [
        [1, 0, 0],
        [1, 0, 0],
        [1, 1, 1],
    ], [
        [1, 1, 1],
        [1, 0, 0],
        [1, 0, 0],
    ], [
        [0, 0, 1],
        [0, 0, 1],
        [1, 1, 1],
    ], [
        [1, 1, 1],
        [0, 0, 1],
        [0, 0, 1],
    ], [
        [1, 1, 1],
        [0, 0, 1],
        [0, 0, 1],
    ]]

    // 创建下一个方块对象
    let currentNextBlock = -1
    let _cellList = []

    class CreateNextBlock {
        data = []
        dom = null
        index = -1
        constructor(data, index) {
            this.data = data
            this.index = index
        }

        drawNextBlock() {
            for (let j = 0; j < this.data.length; j++) {
                for (let k = 0; k < this.data[j].length; k++) {
                    const nextCell = document.createElement('div')
                    nextCell.className = `cell next-cell`
                    if (this.data[j][k] === 1) {
                        nextCell.classList.add('element-shown')
                        nextCell.dataset.type = 'shown'
                    } else {
                        nextCell.classList.add('element-hidden')
                        nextCell.dataset.type = 'hidden'
                    }
                    nextBlockContainer[this.index].style.gridTemplateColumns = `repeat(${this.data[j].length}, 0fr)`
                    nextBlockContainer[this.index].appendChild(nextCell)
                    this.dom = nextBlockContainer[this.index]
                    nextBlockContainer[this.index].addEventListener('mousedown', this.mouseDown)
                }
            }
        }

        mouseDown(e) {
            const _e = findParent(e.target)
            let ele = _e.cloneNode(true)
            _e.style.visibility = 'hidden'
            document.body.appendChild(ele)
            ele.classList.add('move-next-block')
            ele.style.position = 'absolute'
            ele.style.backgroundColor = 'transparent'
            ele.style.padding = '0px'
            ele.style.zIndex = 999
            ele.style.left = `${e.clientX - ele.offsetWidth / 2}px`
            ele.style.top = `${e.clientY - ele.offsetHeight / 2}px`
            currentNextBlock = ele.classList[1]
            window.onmousemove = (e) => {
                const x = e.clientX - ele.offsetWidth / 2
                const y = e.clientY - ele.offsetHeight / 2
                ele.style.left = `${x}px`
                ele.style.top = `${y}px`

                const element = document.elementFromPoint(e.clientX - ele.offsetWidth / 2 - 1, e.clientY - ele.offsetHeight / 2 - 1);
                const elementStartX = element.offsetLeft
                const elementStartY = element.offsetTop
                const elementCenterX = elementStartX + element.offsetWidth / 2
                const elementCenterY = elementStartY + element.offsetHeight / 2
                let elementRow = parseInt(element.dataset.row)
                let elementCol = parseInt(element.dataset.col)
                console.log('element', element)
                console.log('elementCenterX', elementCenterX)
                console.log('elementCenterY', elementCenterY)
                console.log('x', x)
                console.log('y', y)
                console.log('elementRow', elementRow)
                console.log('elementCol', elementCol)
                if(elementCenterX < x && elementCenterY < y) {
                    elementRow = elementRow + 1
                    elementCol = elementCol + 1
                    console.log('右下')
                } else if(elementCenterX < x && elementCenterY > y) {
                    elementCol = elementCol + 1
                    console.log('右上')
                } else if(elementCenterX > x && elementCenterY < y) {
                    elementRow = elementRow + 1
                    console.log('左下')
                } else {
                    console.log('左上')
                }

                console.log('elementRow', elementRow)
                console.log('elementCol', elementCol)
                console.log('nextBlockData', nextBlockData)

                const cell = document.querySelector(`.cell-${elementRow}-${elementCol}`)
                const _data = nextBlockData[currentNextBlock].data
                console.log('_data', _data)
                const _child = gameContainer.children
                for(let i = 0; i < _child.length; i++) {
                    console.log('_child[i]', _child[i])
                    _child[i].style.backgroundColor = 'transparent'
                }
                for (let i = 0; i < _data.length; i++) {
                    for (let j = 0; j < _data[i].length; j++) {
                        if (_data[i][j] === 1) {
                            const cell = document.querySelector(`.cell-${i + elementRow}-${j + elementCol}`)
                            _cellList.push(cell)
                        }
                    }
                }
                const _cLen = _cellList.length
                const _filterCLen = _cellList.filter(item => item).length
                if(_cLen === _filterCLen) {
                    console.log('可以放置')
                    for(let i = 0; i < _cellList.length; i++) {
                        _cellList[i].style.backgroundColor = 'yellow'
                    }
                }
            }
            window.onmouseup = (e) => {
                const _cLen = _cellList.length
                const _filterCLen = _cellList.filter(item => item).length
                if(_cLen === _filterCLen) {
                    console.log('可以放置')
                    for(let i = 0; i < _cellList.length; i++) {
                        _cellList[i].style.backgroundColor = 'yellow'
                        const nextCell = document.createElement('div')
                        nextCell.className = `cell next-cell`
                        _cellList[i].innerHTML = nextCell
                    }
                }

                _e.style.visibility = 'visible'
                document.body.removeChild(ele)
                ele = null
                window.onmousemove = null
                window.onmouseup = null
            }
            console.log(e)
        }
    }

    // 绘制下一个方块
    const drawNextBlock = () => {
        for (let i = 0; i < nextBlockCount; i++) {
            const randomNum = Math.floor(Math.random() * shapeCount)
            const nextBlock = shape[i]
            const createNextBlock = new CreateNextBlock(nextBlock, i)
            createNextBlock.drawNextBlock()
            nextBlockData[`next-block-${i+1}`] = createNextBlock
        }
    }

    // 找到父元素
    const findParent = (ele) => {
        console.log('ele.classList', ele.classList)
        if(ele.classList.contains('next-block')) {
            return ele
        } else {
            return ele.parentNode
        }
    }
    

    const initGame = () => {
        // 初始化游戏数据
        data = []
        for (let i = 0; i < gameRow; i++) {
            data.push(new Array(gameCol).fill(0))
            for (let j = 0; j < gameCol; j++) {
                const cell = document.createElement('div')
                cell.className = `cell cell-${i}-${j}`
                cell.dataset.row = i
                cell.dataset.col = j
                gameContainer.appendChild(cell)
            }
        }
        drawNextBlock()
    }
    initGame()
</script>
</html>